<#include '/admin/header.html' >
<style>
.receiptsInputText{
    width: 40px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
   	text-align:center;
   	
}
</style>
<div  class="admin-main">
   <div>
        <!--提示区域  -->
        <div class="page_explain">
            <h2>操作提示</h2>
            <ul>
                <li><span>·</span>前台首页展示的导航栏，统一由此列表来管理。</li>
                <li><span>·</span>可以对导航栏进行添加，添加子，编辑，和删除操作，如果向跳转展示顺序，可以用排序来完成。</li>
                <li><span>·</span>对于导航栏添加不益过多，需要导航的话可以选择添加子，和选择上级导航来添加，以免显示繁琐与重复。</li>
            </ul>
        </div>
        <!--按钮操作  -->
        <div class="table_control">
            <div class="table_opera">
                <button type="button" id="add_menu_button" class="layui-btn layui-btn-primary " title="添加"><i class="icon iconfont icon-llalbumshopselectorcreate"></i></button>
                <button type="button" id="updateSort" class="layui-btn layui-btn-primary " onclick="saveSort()" title="保存排序"><i class=" icon iconfont icon-xuanze"></i></button>
                <button type="button" class="layui-btn layui-btn-primary" title="提示" id="explain"><i class="icon iconfont icon-tishi1"></i></button>
            </div>
        </div>
    </div>
    
    <!--表格区域  -->
   <form id="menuForm">
    <table id="menudata" class="layui-table site-table table-hover " width="100%" lay-skin="line">
        <thead>
        <tr>
            <th>名称</th>
            <th>排序</th>
            <th>添加子</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
        </thead>
        
    </table>
    <!--传值等操作(暂时)  -->
    <div id="addBrand" ></div>
   </form>
</div>

<script>
var table;
$(function(){
	
	table = $('#menudata').DataTable({
		"language": {
	        "url": "${staticserver}/media/zh_CN.txt"
	    },
	    "processing": true,
	    "serverSide": true,
	    "ordering": false,
	    "searching": false,
	    "lengthChange": false,
	    ajax: {
	        //指定数据源
	        type:"post",
	        url: '${ctx}/core/admin/site-menu/list-json.do',
	    },
	    columns: [ //定义列
	        {data: "name"},
	        {data: null,"render": function(data, type, row) {
 	        	return '<input  type="number" name="sortArray" class="receiptsInputText" value="'+data.sort+'" id="sortArray"><input  type="number" name="menuidArray" value="'+data.menuid+'" id="menuidArray" style="display: none;">';		
 	       	}},
	        {data: null,"render": function(data, type, row) {
	        	return "<a class='layui-btn layui-btn-small ' name='change_btn' onclick='addChildren("+data["menuid"]+")'>添加子</a>";		
	       	}},
	       	{data: null,"render": function(data, type, row) {
	        	return "<a class='layui-btn layui-btn-small layui-btn-normal ' name='change_btn' onclick='edit("+data["menuid"]+")'>编辑</a>";		
	       	}},
	        {data: null,"render": function(data, type, row) {
	        	return "<a class='layui-btn layui-btn-small layui-btn-danger ' name='change_btn' onclick='del("+data["menuid"]+")'>删除</a>";		
	       	}}
	     ]
	});
	
	$("#add_menu_button").click(function(){
	   	 layer.open({
	            title:"添加导航栏",//标题
	            maxmin :true,//右上角可否放大缩小
	            type:2,//弹框的类型
	            shade: [0.3, '#000'],//黑色背景
	            shadeClose:false,//黑色背景是否可以点击关闭
	            content:"${ctx}/core/admin/site-menu/add.do",//内容的URL
	            area:['600px','460px'],//弹框大小
	            scrollbar: false//是否允许浏览器出现滚动条
	        });
		});
});
		
//编辑
function edit(menuid){
	layer.open({
        title:"修改导航栏",//标题
        maxmin :true,//右上角可否放大缩小
        type:2,//弹框的类型
        shade: [0.3, '#000'],//黑色背景
        shadeClose:false,//黑色背景是否可以点击关闭
        content:ctx+"/core/admin/site-menu/edit.do?menuid="+menuid,//内容的URL
        area:['600px','460px'],//弹框大小
        scrollbar: false//是否允许浏览器出现滚动条
    });
}

//删除
function del(menuid){
	if(!confirm("确认删除导航栏？")){
		return;
	}
	$.ajax({
		url:ctx+"/core/admin/site-menu/delete.do?menuid="+menuid,
		type:"post",
		dataType:"json",
		success:function(data){
			if(data.result == 1){
				$.Loading.success(data.message);
				table.ajax.url(ctx+"/core/admin/site-menu/list-json.do").load();
			}
		}
	});
}

//添加子
function addChildren(menuid){
	layer.open({
        title:"添加子导航栏",//标题
        maxmin :true,//右上角可否放大缩小
        type:2,//弹框的类型
        shade: [0.3, '#000'],//黑色背景
        shadeClose:false,//黑色背景是否可以点击关闭
        content:ctx+"/core/admin/site-menu/add-children.do?menuid="+menuid,//内容的URL
        area:['600px','460px'],//弹框大小
        scrollbar: false//是否允许浏览器出现滚动条
    });
}
//保存排序  
function saveSort(){
		var value = document.getElementById("sortArray").value;
		var reg=/^\d+$/;   
		if(reg.test(value)==true){
			var options = {
					url : "${ctx}/core/admin/site-menu/update-sort.do?ajax=yes",
					type : "POST",
					dataType : 'json',
					success : function(result) {
						if (result.result == 1) {	
							layer.msg("保存成功！！")
							table.ajax.url(ctx+"/core/admin/site-menu/list-json.do").load();
						}
						if (result.result == 0) {
							layer.msg(result.message)
						}
					},
					error : function(e) {
						layer.msg("出现错误 ，请重试"); 
					}
				};
				$('#menuForm').ajaxSubmit(options);
		}else{
			layer.msg("请填写数字!");
		}
}
</script>
<#include '/admin/footer.html' >
